<template>
	<view class="home">
		<u-navbar :title="titleData" :titleStyle="titleStyle" leftIconColor="#aaff00" safeAreaInsetTop fixed placeholder
			:autoBack="true" bgColor="rgba(0,0,0,0)">
			<view class="u-nav-slot" slot="right" v-if="relativenNum>0">
				超时
			</view>
		</u-navbar>
		<view class="realtime_i">
			<!-- 			<view class="het_c">

			</view> -->
			<view class="het_b">
				<text>实时雨量</text>
				<text style="color: #ffffff;font-size: 30rpx;">(毫米)</text>
			</view>
			<!-- 			<view class="het_a">

			</view> -->

		</view>
		<view class="realtime_top">
			<view class="i_item">
				<view class="num">
					{{thingsModelValue.MR}}
				</view>
				<view class="text">
					<image class="i_img" src="@/static/images/timef.png" mode=""></image>
					<view class="">
						分钟雨量
					</view>

				</view>
			</view>
			<view class="i_item">
				<view class="num">
					{{thingsModelValue.TR}}
				</view>
				<view class="text">
					<image class="i_img" src="@/static/images/timea.png" mode=""></image>
					<view class="">
						今日雨量
					</view>
				</view>
			</view>

		</view>
		<view class="realtime_bom">
			<view class="i_item">
				<view class="num">
					{{thingsModelValue.HR}}
				</view>
				<view class="text">
					<image class="i_img" src="@/static/images/timee.png" mode=""></image>
					<view class="">
						小时雨量
					</view>
				</view>
			</view>
			<view class="i_item">
				<view class="num">
					{{thingsModelValue.YR}}
				</view>
				<view class="text">
					<image class="i_img" src="@/static/images/timec.png" mode=""></image>
					<view class="">
						昨日雨量
					</view>

				</view>
			</view>

		</view>
		<view class="realtime_bom">
			<view class="i_item">
				<view class="num">
					{{thingsModelValue.HS}}
				</view>
				<view class="text">
					<image class="i_img" src="@/static/images/timed.png" mode=""></image>
					<view class="">
						最大雨强
					</view>

				</view>
			</view>

			<view class="i_item">
				<view class="num">
					{{thingsModelValue.H24R}}
				</view>
				<view class="text">
					<image class="i_img" src="@/static/images/timeb.png" mode=""></image>
					<view class="">
						24h雨量
					</view>

				</view>
			</view>
		</view>
		<view class="realtime_lat" @click="mapFn(optionData)">
			<view class="" style="display: flex;align-items: center;">
				<image class="i_img" src="@/static/images/lat.png" mode=""></image>
				<view class="lonlat">
					<view class="lon">
						经度：{{optionData.lon}}
					</view>
					<view class="lat">
						纬度：{{optionData.lat}}
					</view>
				</view>
			</view>
			<view class="dl_box">
				<view class="">
					<view class="v_a">{{dataDL}}%</view>
					<view class="" style="height: 10rpx;">

					</view>
					<u-line-progress :percentage="dataDL" height="4" :showText="false"
						inactiveColor="rgba(0, 255, 127, 0.3)" activeColor="#1be99f"></u-line-progress>
				</view>
				<view class="dl">
					<!-- 电量 -->
					<image class="img" src="@/static/dianlia.png" mode="" v-if="dataDL>=100"></image>
					<image class="img" src="@/static/dianlib.png" mode="" v-if="dataDL<100 && dataDL>=80"></image>
					<image class="img" src="@/static/dianlic.png" mode="" v-if="dataDL<80 && dataDL>=60"></image>
					<image class="img" src="@/static/dianlid.png" mode="" v-if="dataDL<60 && dataDL>=40"></image>
					<image class="img" src="@/static/dianlie.png" mode="" v-if="dataDL<40 && dataDL>=20"></image>
					<image class="img" src="@/static/dianlif.png" mode="" v-if="dataDL<20 && dataDL>=0"></image>
				</view>
			</view>
		</view>
		<view class="realtime_lat">
			<view class="lonlat">
				<view class="lon">
					上报时间：{{thingsModelValue.TIM}}
				</view>
			</view>
		</view>
		<view class="realtime_lathv">
			<view class="lon" hover-class="realtime_latACV" @click="historicalRecordFn(0)">
				降雨记录
			</view>
			<view class="lon" hover-class="realtime_latACV" @click="historicalRecordFn(1)">
				每日雨量
			</view>
			<view class="lon" hover-class="realtime_latACV" @click="mapFn">
				测站位置
			</view>
			<view class="lon" hover-class="realtime_latACV" @click="weatherFn">
				当地天气
			</view>
		</view>
	</view>
</template>

<script>
	import dayjs from '@/common/dayjs.min.js';
	export default {
		data() {
			return {
				dataDL:80,
				titleData: '实时数据',
				thingsModelValue: {},
				id: null,
				timer: null,
				titleStyle: {
					color: '#bffd50',
					fontSize: '50rpx'
				},
				relativenNum: 0,
				deviceName: '',
				productKey: '',
				optionData: {},
				latlon: {
					mapLat: '',
					mapLon: '',
				}
			}
		},
		onUnload() {
			console.log('卸载', this.timer);
			clearInterval(this.timer);
		},
		onLoad(option) {
			this.optionData = option
			this.deviceName = option.deviceName
			this.productKey = option.productKey
			this.titleData = option.name
			// this.id = option.id
			this.realtimeFn(option)
			console.log('天气',option);
		},
		onShow() {
			clearInterval(this.timer);
			this.timer = setInterval(() => {
				this.realtimeFn(this.optionData)
			}, 30000)
		},
		methods: {
			// 跳转地图
			mapFn(i) {
				console.log('i',i);
				uni.navigateTo({
					url: '/pages/maps/mapItem?' + '&lng=' + this.optionData.lon + '&lat=' + this.optionData
						.lat + '&nickName=' + this.titleData
				});
			},
			// 天气
			weatherFn() {
				clearInterval(this.timer);
				uni.navigateTo({
					url: '/pages/index/historicalData?deviceName=' + this.deviceName + '&productKey=' + this
						.productKey + '&lon=' + this.optionData.lon + '&lat=' + this.optionData.lat + '&name=' +
						this.titleData
				});
			},
			// 历史记 录
			historicalRecordFn(e) {
				clearInterval(this.timer);
				uni.navigateTo({
					url: '/pages/index/historicalRecord?deviceName=' + this.deviceName + '&productKey=' + this
						.productKey + '&lon=' + this.thingsModelValue.LON + '&lat=' + this.thingsModelValue.LAT +
						'&name=' + this.titleData + '&sty=' + e
				});
			},
			// 相对时间
			relativeTime(date) {
				const dateToCheck = dayjs(date.TIM);
				// 获取今天的日期
				const today = dayjs().format('YYYY-MM-DD HH:mm');
				// 计算dateToCheck距离今天的天数差异
				const daysDifference = dateToCheck.diff(today, 'day');
				// 如果你想要一个绝对值（不考虑正负），可以使用Math.abs
				const absoluteDaysDifference = Math.abs(daysDifference);
				this.relativenNum = absoluteDaysDifference
			},
			realtimeFn(e) {
				uni.$u.http.get('/api/device/device/getLatestReportData', {
					params: {
						"deviceName": e.deviceName,
						"productKey": e.productKey
					}
				}).then(res => {
					if (res.code == 200) {
						let arr = JSON.parse(res.data.logValue)
						console.log('设备信息', res.data)
						let obj = {}
						for (let i = 0; i < arr.length; i++) {
							if (arr[i].identifier == 'TIM') {
								obj.TIM = dayjs(arr[i].value).format('YYYY-MM-DD HH:mm')
								// obj.TIM = dayjs(arr[i].value).format('YYYY-MM-DD HH:mm')
							}
							if (arr[i].identifier == 'LON') {
								obj.LON = arr[i].value
							}
							if (arr[i].identifier == 'LAT') {
								obj.LAT = arr[i].value
							}
							if (arr[i].identifier == 'IMEI') {
								obj.IMEI = arr[i].value
							}
							//分钟
							if (arr[i].identifier == 'MR') {
								obj.MR = arr[i].value
							}
							//小时
							if (arr[i].identifier == 'HR') {
								obj.HR = arr[i].value
							}
							//雨强
							if (arr[i].identifier == 'HS') {
								obj.HS = arr[i].value
							}
							//今日
							if (arr[i].identifier == 'TR') {
								obj.TR = arr[i].value
							}
							// 24小时
							if (arr[i].identifier == 'H24R') {
								obj.H24R = arr[i].value
							}
							//昨日
							if (arr[i].identifier == 'YR') {
								obj.YR = arr[i].value
							}
							
							
							
							
							// 615
							// 时间
							if (arr[i].identifier == 'F0') {
								obj.TIM = dayjs(arr[i].value).format('YYYY-MM-DD HH:mm')
								// obj.TIM = dayjs(arr[i].value).format('YYYY-MM-DD HH:mm')
							}
							// 分钟雨量
							if (arr[i].identifier == '21') {
								obj.MR = arr[i].value
							}
							//小时雨量
							if (arr[i].identifier == '1A') {
								obj.HR = arr[i].value
							}
							//今日
							if (arr[i].identifier == '20') {
								obj.TR = arr[i].value
							}
							//24小时
							if (arr[i].identifier == '20') {
								obj.H24R = arr[i].value
							}
							//昨日
							if (arr[i].identifier == 'ZR') {
								obj.YR = arr[i].value
							}

						}
						this.thingsModelValue = obj
						console.log('雨量',obj);
						this.relativeTime(obj)

					} else {
						uni.showToast({
							title: '暂无数据',
							duration: 1500
						});
						// uni.reLaunch({
						// 	url: '/pages/home/login'
						// });
					}
				}).catch(err => {
					console.log('err', err);
					//  请求失败,隐藏加载状态
					this.mescroll.endErr()
				})
			}
		}
	}
</script>
<style scoped lang="scss">
	// 数据更新超时
	.u-nav-slot {
		border-radius: 10rpx;
		padding: 3rpx 10rpx;
		color: #ffffff;
		background-color: #e51a3f;
		margin-right: 20rpx;
	}

	.home {
		padding: 0rpx 30rpx 30rpx 30rpx;

		.realtime_i {
			border-radius: 30rpx;
			border: 5rpx solid #1be99f;
			background-color: #131313;
			color: #fbed2a;
			padding: 10rpx;
			font-size: 60rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.het_b {
				// width: 330rpx;
				// background-color: #e51a3f;
			}

			.het_c {
				width: 120rpx;
			}
		}

		.realtime_top {
			margin-top: 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.i_item {
				width: 285rpx;
				padding: 20rpx;
				border-radius: 30rpx;
				border: 5rpx solid #1be99f;
				background-color: #131313;

				.num {
					font-size: 80rpx;
					color: #ffffff;
					text-align: center;
					font-family: 'MyFont';
				}

				.text {
					font-size: 55rpx;
					color: #72fa12;
					display: flex;
					align-items: center;
					justify-content: space-around;

					.i_img {
						width: 50rpx;
						height: 50rpx;
					}
				}
			}
		}

		.realtime_bom {
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.i_item {
				width: 285rpx;
				padding: 20rpx;
				border-radius: 30rpx;
				border: 5rpx solid #1be99f;
				background-color: #131313;

				.num {
					font-size: 80rpx;
					color: #ffffff;
					text-align: center;
					font-family: 'MyFont';
				}

				.text {
					font-size: 55rpx;
					color: #0fe9ce;
					display: flex;
					align-items: center;
					justify-content: space-around;

					.i_img {
						width: 50rpx;
						height: 50rpx;
					}
				}
			}
		}

		.realtime_lat {
			margin-top: 20rpx;
			padding: 20rpx;
			border-radius: 30rpx;
			border: 5rpx solid #1be99f;
			background-color: #131313;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.i_img {
				width: 80rpx;
				height: 80rpx;
				margin-right: 20rpx;
			}

			.lonlat {
				font-family: 'MyFont';
				color: #0fe9ce;
				font-size: 50rpx;
				// background-color: #db00ef;

			}

			.dl_box {
				font-size: 40rpx;
				color: #1be99f;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				align-items: center;
				line-height: 35rpx;
				padding: 15rpx;
				margin-right: 20rpx;
				// background-color: #03434d;
				border-radius: 15rpx;

				.v_a {
					font-family: 'MyFont';
					// margin-bottom: 5rpx;
					font-size: 45rpx;
				}

				.dl {
					margin-top: 10rpx;

					.img {
						width: 80rpx;
						height: 40rpx;
					}
				}
			}
		}

		.realtime_lathv {
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-wrap: wrap;

			.lon {
				width: 300rpx;
				text-align: center;
				color: #fff700;
				font-size: 50rpx;
				// background-color: #032116;
				border: #1be99f solid 5rpx;
				margin-top: 20rpx;
				padding: 5rpx;
				border-radius: 30rpx;
			}
		}

		.realtime_latACV {
			background-color: #50ffd4;
		}
	}
</style>
<style>
	@font-face {
		font-family: 'MyFont';
		src: url('@/static/fonts/LED.otf');
	}

	page {
		background-color: #232227;
	}
</style>